@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-[url('/images/bg-header-mobile.png')];
    @apply bg-no-repeat bg-contain;
  }
  @media screen(md) {
    body {
      @apply bg-[url('/images/bg-header-desktop.png')];
    }
  }
}

@layer components {
  .section-content {
    @apply max-w-3xl mx-auto  leading-9 text-center text-grayishBlue;
  }
  .section-container {
    @apply max-w-6xl mx-auto text-center px-10;
  }
  .section-container > h3 {
    @apply mb-8 text-4xl font-bold text-darkGrayishBlue md:text-5xl;
  }
  .section-container h5 {
    @apply mb-2 text-2xl font-bold text-darkGrayishBlue;
  }
  .section-container .content {
    @apply section-content text-xl;
  }
  .section-container .content-2xl {
    @apply section-content text-2xl;
  }
  .btn-container {
    @apply flex flex-col justify-center w-full space-y-6 text-xl text-white md:flex-row md:space-y-0 md:space-x-4;
  }
  .ficon:hover {
    filter: invert(53%) sepia(68%) saturate(434%) hue-rotate(121deg)
      brightness(101%) contrast(94%);
  }
}
